<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar></view>

		<view class="detail-info" v-if="ycxsHstRoom.id">
			<view class="info-title">
				<view class="title-top">{{ ycxsHstRoom.roomName }}</view>
				<view class="title-btm">
					<text class="btm-time">{{ ycxsHstRoom.createTime }}</text>
				</view>
			</view>
		</view>

		<view class="form-box form-box-show">
			<u-form ref="uForm">
				<u-form-item class="form-item" label="开始时间">{{ ycxsHstRoom.hopeStartTime }}</u-form-item>
				<u-form-item class="form-item" label="结束时间">{{ ycxsHstRoom.hopeEndTime }}</u-form-item>
				<u-form-item class="form-item" label="主持人">
					<block v-for="(item, index) in zxList" :key="item.id">{{ item.userName }}{{ index == zxList.length - 1 ? '' : ',' }}</block>
				</u-form-item>
				<u-form-item class="form-item" label="参会人员">
					<block v-for="(item, index) in chList" :key="item.id">{{ item.userName }}{{ index == chList.length - 1 ? '' : ',' }}</block>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			typeMap: {
				1: '即时',
				2: '预约'
			},
			id: '',
			ycxsHstRoom: {
				id: '',
				roomName: '',
				hopeStartTime: '',
				hopeEndTime: '',
				createTime: ''
			},
			zxList: [],
			chList: []
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
			} else {
				this.$logout();
			}
		},
		loadData() {
			this.$request('/haoshitong/query/' + this.id).then((res) => {
				// this.ycxsHstRoom = res.data.ycxsHstRoom;
				Object.keys(this.ycxsHstRoom).forEach((key) => (this.ycxsHstRoom[key] = res.data.ycxsHstRoom[key]));
				// this.zxList = res.data.zxUserList;
				// this.chList = res.data.chUserList;
				res.data.zxUserList.forEach((item) => {
					this.zxList.push({
						id: item.id,
						userId: item.userId,
						userName: item.userName
					});
				});
				res.data.chUserList.forEach((item) => {
					this.chList.push({
						id: item.id,
						userId: item.userId,
						userName: item.userName
					});
				});
			});
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	border-top: 10rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
	}
}

.fiexd-btm {
	position: static;
	border-top: 10rpx solid $u-border-color;
	padding: 30rpx;
}
</style>
